import Taro from '@tarojs/taro';
import dayjs from 'dayjs';
import { Image } from '@tarojs/components';
// import { Image } from '@nutui/nutui-react-taro';
import classNames from 'classnames';
import styles from './index.module.less';
import { resizeImgUrl } from '@/common/utils';

type MovieCardPropsType = {
    data: Movie.MovieDto;
    isHot: boolean;
    index: number;
    className?: string;
    onClick: (movie: Movie.MovieDto) => void;
};
function MovieCard(props: MovieCardPropsType) {
    const { data, index, className, onClick } = props;
    const {
        picUrl,
        name,
        grade,
        publishTime,
        director,
        cast,
        filmTypes,
        isHasSchedule,
        salesStatus,
    } = data;
    return (
        <div
            className={classNames(styles.card, className)}
            onClick={() => {
                if (isHasSchedule) {
                    onClick(data);
                } else {
                    Taro.showModal({
                        title: '没有场次',
                        content: '当前电影没有在售场次！',
                    });
                }
            }}
        >
            <Image src={resizeImgUrl(picUrl)}  className={styles.pic} mode="aspectFill" />
            <div className={styles.rightBox}>
                <div className={styles.info}>
                    <div className={styles.title}>{name}</div>
                    <div className={styles.wishDec}>
                        <span className={styles.numTxt}>
                            {grade && Number(grade) !== 0 ? '评分：' : ''}
                        </span>
                        {grade != '0' && <span className={styles.num}>{grade}&nbsp;</span>}
                        <span className={styles.numTxt}>{filmTypes}</span>
                    </div>
                    <div className={styles.dec}>{director ? '导演：' + director : ''}</div>
                    <div className={styles.dec}>{cast ? '主演：' + cast : ''}</div>
                </div>
                <div className={styles.rightInfo}>
                    <div className={styles.rank}>
                        <span className={styles.rankTxt}>TOP.{index + 1}</span>
                    </div>
                    <div className={styles.btnBox}>
                        {salesStatus < 2 && (
                            <div
                                className={classNames(styles.btn, {
                                    [styles.preShow]: salesStatus == 0,
                                })}
                            >
                                {salesStatus == 1 ? '购票' : '预售'}
                            </div>
                        )}
                        {salesStatus == 2 && (
                            <div
                                className={classNames(styles.btn, styles.preShow, styles.disabled)}
                            >
                                {' '}
                                {dayjs(publishTime).format('MM.DD')}待售
                            </div>
                        )}
                    </div>
                </div>
            </div>
        </div>
    );
}

export default MovieCard;
